/**
 * @description 工具栏：查询组件
 * @author chenyan
 */

import React, { PropTypes, PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin, Select, Row, Col, Card } from 'antd';
import { FirstHeaderC, MilepostC, NoDataC, TableC } from '../../../../../comps';
import { bondInfoTwo, bondInfoThree, bondInfoAsset } from './ConfigInfo';
import InfoListC from './infoList';
import ChartsTableC from './chartsTable';
import uuid from 'es6-uuid';

const FormItem = Form.Item;
const { Option } = Select;

@Form.create()
class BasicInfoC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      bondID: '',
      exchangeCode: '',
      tradingCode: '',
      bondBasicInfo: {}, //债券基本信息
      bondPublishInfo: {}, //债券发行人信息
      dateLine: [], //日历进度条数据
      showIncome: false, //营业分布是否展开
    };
  }
  componentDidMount() {}

  UNSAFE_componentWillReceiveProps(nextProps) {
    //判断是否是最新的bondID
    if (nextProps.bondID != this.state.bondID) {
      this.setState(
        {
          bondID: nextProps.bondID,
          exchangeCode: nextProps.exchangeCode,
          tradingCode: nextProps.tradingCode,
        },
        () => {
          this.props.form.resetFields();
          this.queryData();
        },
      );
    }
  }

  queryData = () => {
    const { bondID, exchangeCode, tradingCode } = this.state;
    const { dispatch } = this.props;
    //获取基本信息
    dispatch({
      type: 'bondDeviationDetailM/queryBondBasicInfoDetail',
      payload: {
        secucode: bondID,
        exchangeCode: exchangeCode,
        tradingCode: tradingCode,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            bondBasicInfo: data,
          });
        } else {
          this.setState({
            bondBasicInfo: {},
          });
        }
      },
    });
    //获取发行人信息
    dispatch({
      type: 'bondDeviationDetailM/queryBondIssuerInfoDetail',
      payload: {
        bondID,
        exchangeCode: exchangeCode,
        tradingCode: tradingCode,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            bondPublishInfo: data,
          });
        } else {
          this.setState({
            bondPublishInfo: {},
          });
        }
      },
    });
    //获取债券日历
    dispatch({
      type: 'bondDeviationDetailM/queryBondCalendar',
      payload: {
        bondID,
        exchangeCode: exchangeCode,
        tradingCode: tradingCode,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            dateLine: data,
          });
        } else {
          this.setState({
            dateLine: [],
          });
        }
      },
    });
    //查询流通市场
    dispatch({
      type: 'bondDeviationDetailM/queryMarket',
      payload: {
        secucode: bondID,
        exchangeCode: exchangeCode,
        tradingCode: tradingCode,
      },
    });
    //查询财务数据
    this.queryComFinancial();
    //获取财务日期列表
    dispatch({
      type: 'bondDeviationDetailM/queryDateList',
      payload: {
        secucode: bondID,
        type: 'financialindicator',
        exchangeCode: exchangeCode,
        tradingCode: tradingCode,
      },
    });
    //查询主要收入
    this.queryMainIncome();
    //获取主营业务日期列表
    dispatch({
      type: 'bondDeviationDetailM/queryDateList',
      payload: {
        secucode: bondID,
        type: 'corebusiness',
        exchangeCode: exchangeCode,
        tradingCode: tradingCode,
      },
    });
  };

  handleChange = (e, type) => {
    if (type == 'income') {
      this.props.form.setFieldsValue({
        tradingday: e,
      });
      this.queryMainIncome();
    } else {
      this.props.form.setFieldsValue({
        dataDt: e,
      });
      this.queryComFinancial();
    }
  };

  //查询主要收入
  queryMainIncome = () => {
    const {
      dispatch,
      form: { getFieldsValue },
    } = this.props;
    const { bondID, exchangeCode, tradingCode } = this.state;
    dispatch({
      type: 'bondDeviationDetailM/queryMainIncom',
      payload: {
        secucode: bondID,
        tradingday: getFieldsValue().tradingday,
        exchangeCode: exchangeCode,
        tradingCode: tradingCode,
      },
      callback: (res) => {
        if (res && !getFieldsValue().tradingday) {
          this.props.form.setFieldsValue({
            tradingday: res,
          });
        }
      },
    });
  };

  //查询财务数据
  queryComFinancial = () => {
    const {
      dispatch,
      form: { getFieldsValue },
    } = this.props;
    const { bondID, exchangeCode, tradingCode } = this.state;
    dispatch({
      type: 'bondDeviationDetailM/queryComFinancial',
      payload: {
        secucode: bondID,
        tradingday: getFieldsValue().dataDt,
        exchangeCode: exchangeCode,
        tradingCode: tradingCode,
      },
      callback: (res) => {
        if (res && !getFieldsValue().dataDt) {
          this.props.form.setFieldsValue({
            dataDt: res,
          });
        }
      },
    });
  };

  renderTable = () => {
    const {
      loading,
      bondDeviationDetailM: { marketObj },
    } = this.props;
    const columns = marketObj.columns || [];
    const dataSource = marketObj.dataSource || [];
    dataSource.map((item) => (item.key = uuid(16)));
    return (
      <div>
        <Spin spinning={loading.effects['bondDeviationDetailM/queryMarket'] == true}>
          <TableC columns={columns} dataSource={dataSource} hidePage={true} rowKey={'key'} />
        </Spin>
      </div>
    );
  };

  //营业分布折叠展示
  showIncome = (i) => {
    this.setState({
      showIncome: i,
    });
  };

  render() {
    const {
      loading,
      form: { getFieldDecorator },
    } = this.props;
    const {
      bondDeviationDetailM: { dateListCom, dateListMainIncom, mainIncomObj, mainIncomPie, comFinancialData },
    } = this.props;
    const { bondBasicInfo, bondPublishInfo, dateLine, showIncome } = this.state;
    const basicProps = {
      data: { 0: bondBasicInfo, 1: {}, 2: {} },
      infoList: bondInfoTwo,
      marginLeft: '8px',
      width: '74px',
    };
    const publishProps = {
      data: { 0: {}, 1: bondPublishInfo, 2: {} },
      infoList: bondInfoThree,
      marginLeft: '8px',
      width: '100px',
    };
    const assetProps = {
      data: { 0: {}, 1: {}, 2: comFinancialData },
      infoList: bondInfoAsset,
      marginLeft: '8px',
      width: '170px',
    };
    return (
      <div className='basic_info'>
        <Row type='flex' gutter={20}>
          <Col span={12}>
            <Card>
              <FirstHeaderC title='详细基本信息' />
              <div className='card-bg'>
                <Spin spinning={loading.effects['bondDeviationDetailM/queryBondBasicInfoDetail'] == true}>
                  <InfoListC {...basicProps} />
                </Spin>
              </div>
            </Card>
          </Col>
          <Col span={12}>
            <Card>
              <FirstHeaderC title='发行人基本信息' />
              <div className='card-bg'>
                <Spin spinning={loading.effects['bondDeviationDetailM/queryBondIssuerInfoDetail'] == true}>
                  <InfoListC {...publishProps} />
                </Spin>
              </div>
            </Card>
          </Col>
        </Row>
        <Row type='flex' gutter={20}>
          <Col span={12}>
            <Card>
              <FirstHeaderC title='债券日历' />
              <div className='card-bg'>
                <Spin spinning={loading.effects['bondDeviationDetailM/queryBondCalendar'] == true}>
                  {dateLine.length ? <MilepostC data={dateLine} /> : <p style={{ margin: '60px 0 70px 0', textAlign: 'center' }}>暂无数据</p>}
                </Spin>
              </div>
            </Card>
            <Card className='whiteBg'>
              <FirstHeaderC title='流通市场' />
              <div className='card-bg'>{this.renderTable()}</div>
            </Card>
          </Col>
          <Col span={12}>
            <Card>
              <FirstHeaderC title='财务数据' />
              <FormItem label='日期选择'>
                {getFieldDecorator(
                  'dataDt',
                  {},
                )(
                  <Select
                    style={{ width: 240 }}
                    onChange={(e) => {
                      this.handleChange(e, 'caiwu');
                    }}
                  >
                    {dateListCom.length
                      ? dateListCom.map((item, i) => (
                          <Option value={item.ENDDATE} key={i}>
                            {item.REPORTNAME}
                          </Option>
                        ))
                      : null}
                  </Select>,
                )}
              </FormItem>
              <div className='card-bg'>
                <Spin spinning={loading.effects['bondDeviationDetailM/queryComFinancial'] == true}>
                  <InfoListC {...assetProps} />
                </Spin>
              </div>
            </Card>
          </Col>
        </Row>
        <div>
          <Card>
            <FirstHeaderC title='营业分布' arrowBtn={!(dateListMainIncom && dateListMainIncom.length)} onExpendClick={this.showIncome} />
            {dateListMainIncom.length || showIncome ? (
              <div>
                <FormItem label='日期选择'>
                  {getFieldDecorator(
                    'tradingday',
                    {},
                  )(
                    <Select
                      style={{ width: 240 }}
                      onChange={(e) => {
                        this.handleChange(e, 'income');
                      }}
                    >
                      {dateListMainIncom.length
                        ? dateListMainIncom.map((item, i) => (
                            <Option value={item.ENDDATE} key={i}>
                              {item.REPORTNAME}
                            </Option>
                          ))
                        : null}
                    </Select>,
                  )}
                </FormItem>
                <div className='card-bg'>
                  <Spin spinning={loading.effects['bondDeviationDetailM/queryMainIncom'] == true}>
                    {mainIncomObj.dataSource && mainIncomObj.dataSource.length ? <ChartsTableC dataObj={mainIncomObj} dataPie={mainIncomPie} /> : <NoDataC height='250px' />}
                  </Spin>
                </div>
              </div>
            ) : (
              ''
            )}
          </Card>
        </div>
      </div>
    );
  }
}

export default connect(({ bondDeviationDetailM, loading }) => ({
  bondDeviationDetailM,
  loading,
}))(BasicInfoC);
